<template>
	<view>
		<view class="search-cont">
			<view class="search">
				<input type="text" placeholder-class="inputclass" confirm-type="search" focus="true"
					placeholder="请输入关键字" v-model="searchKey" @confirm="onKeyInput" />
			</view>
			<view class="search-code" @click="searchRequest()">
				搜索
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="search-history" v-if="ifhistory">
			<view class="search-title">
				<view>搜索历史</view>
				<view @click="removeStorage()">
					<image src="../../static/coen/searchend.svg" mode="widthFix"></image>
				</view>
			</view>
			<!-- tab -->
			<view class="menu-block">
				<block v-for="(item,index) in searchHistory" :key="index">
					<view @click="historyClick(item)">{{item}}</view>
				</block>
			</view>
		</view>
		<!-- 内容展示 -->
		<view class="content-left" v-if="shopcont">
			<block v-for="(item,index) in searchList" :key="index">
				<shop-item :shopInfo="item"></shop-item>
			</block>
		</view>
		<!-- 反馈组件 -->
		<tips :tipShow="tipShow" :tipMsg="tipMsg"></tips>
	</view>
</template>

<script>
	import ShopItem from '../../components/content/ShopItem.vue'
	import Tips from '../../components/common/Tips.vue'

	import {
		getSearchList
	} from '../../network/search.js'

	export default {
		components: {
			ShopItem,
			Tips
		},
		data() {
			return {
				// 搜索关键词
				searchKey: '',
				// 搜索结果
				searchList: [],
				// 搜索历史
				searchHistory: [],
				// 是否有搜索历史
				ifhistory: false,
				// 内容展示区
				shopcont: false,
				// 提示显示
				tipShow: false,
				// 提示内容
				tipMsg: ''
			}
		},
		created() {
			this.initSearchHistory()
		},
		methods: {
			// 点击搜索按钮触发的
			searchRequest() {
				if (this.searchKey) {
					this.ifhistory = false
					let searchkey = this.searchKey
					this.searchData(searchkey)
					this.storeSearchKey(searchkey)
				}
			},
			// 搜索键盘的触发
			onKeyInput(e) {
				if (!e.detail.value) {
					this.ifhistory = false
					this.searchData(searchkey)
					this.storeSearchKey(searchkey)
				}
			},

			// 本地存入搜索历史
			storeSearchKey(searchkey) {
				// 先取出本地缓存的数据
				let seararray = uni.getStorageSync('search_key') || []
				// 存入一个新搜索关键词
				seararray.unshift(searchkey)
				uni.setStorageSync('search_key', seararray);
			},
			// 取出本地缓存的数据
			initSearchHistory() {
				let searchKeys = uni.getStorageSync('search_key')
				// 数组去重 类数组数组化
				let handledSearchList = [...new Set(searchKeys)]
				console.log(handledSearchList)
				if (!handledSearchList.length) {
					this.ifhistory = false
				} else {
					this.searchHistory = handledSearchList
					this.ifhistory = true
				}
			},
			// 手动清除搜索历史
			removeStorage() {
				uni.removeStorageSync('search_key');
				this.initSearchHistory()
			},
			// 搜索历史的搜索
			historyClick(item) {
				this.ifhistory = false
				this.searchData(item)
			},

			// 发送请求搜索
			searchData(searchkey) {
				let data = {
					searchdata: searchkey
				}
				getSearchList(data).then(res => {
					if (typeof res.data === 'string') {
						this.searchList = []
						this.shopcont = false
						this.tipState(true, '没有找到商品')
						return
					}
					this.searchList = res.data
					this.shopcont = true
					this.tipState(false, '')
				})
			},

			// 反馈提示
			tipState(state, msg) {
				this.tipShow = state
				this.tipMsg = msg
			}
		}
	}
</script>

<style scoped>
	.search {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		background: #f8f8f8;
		border-radius: 20upx;
		margin-left: 20upx;
	}

	.search input {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		font-size: 30upx;
		color: #666666;
		padding-left: 30upx;
	}

	.search-cont {
		display: flex;
		justify-content: space-between;
		height: 70upx;
		align-items: center;
		padding: 30upx 0;
	}

	.search-code {
		width: 150upx;
		height: 50upx;
		text-align: center;
		font-size: 30upx;
	}

	/* 搜索历史 */
	.search-history {
		margin: 20upx;
	}

	.search-title {
		font-size: 30upx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60upx;
		line-height: 60upx;
	}

	.search-title image {
		width: 36upx;
		height: 36upx;
		display: block;
	}

	.menu-block view {
		background: #f7f8fa;
		border-radius: 6upx;
		font-size: 27upx;
		color: #292c33;
		text-align: center;
		padding: 10upx;
		margin: 20upx 20upx 0 0;
	}

	.menu-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.content-left {
		margin: 0 14upx;
	}
</style>
